<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-3.3.-1.js"></script>


    <script type="text/javascript">

        //1.制造测试数据
        var  cityJson=[
                          {cityId:10,cityName:'保定市',pid:1},
                          {cityId:20,cityName:'廊坊市',pid:1},
                          {cityId:30,cityName:'郑州市',pid:2},
                           {cityId:40,cityName:'许昌市',pid:2},
                            {cityId:0,cityName:'请选择',pid:0}
                       ];

         function cityFind(){
             //1.获得[省份下拉列表被选中的option标签value]
               var provinceId = $("#province>option:selected").val();
             //2.将城市下拉列表原有的option子标签,统统删除掉
               $("#city").empty();
              //3.到cityJson数组定位隶属于当前省份下所有城市信息
             for(var i=0;i<cityJson.length;i++){
                 var jsonObj = cityJson[i];
                 if(jsonObj.pid == provinceId){
                     //4.将得到城市信息变成<option>标签
                     var $option =  $("<option></option>");//<option value="10"> 保定市</option>
                     $option.val(jsonObj.cityId);
                     $option.text(jsonObj.cityName);
                     //5.将生成的option标签添加到[城市下拉列表中]
                     $("#city").append($option);
                 }
             }



         }


          function main(){
              $("#province").bind("change",cityFind);
          }

          $(main);
    </script>

</head>
<body>

           <center>

                省份:<select id="province">
                       <option value="0">请选择</option>
                       <option value="1">河北省</option>
                       <option value="2">河南省</option>
                     </select><br/>

               城市:<select id="city">
                        <option value="0">请选择</option>

                   </select><br/>

           </center>
</body>
</html>